<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="static/img/logo.png" type="image/png">
    <link rel="stylesheet" href="static/css/leaderboard.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1113798_0532l8oa6jqp.css">
    <title>排行榜 - 智慧答题系统</title>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-logo">
                <img src="static/img/logo.png" alt="Logo">
                <h2>排行榜</h2>
            </div>
            <div class="nav-menu">
                <a href="/" class="nav-link">首页</a>
                <a href="/quiz" class="nav-link">答题</a>
                <a href="/profile" class="nav-link">个人中心</a>
                <button class="logout-btn" id="logoutBtn">退出登录</button>
            </div>
        </div>
    </nav>

    <!-- 主内容区 -->
    <main class="main-content">
        <div class="leaderboard-container">
            <!-- 页面标题 -->
            <div class="page-header">
                <h1><i class="iconfont icon-star"></i> 排行榜</h1>
                <p>看看谁是最厉害的答题王者</p>
            </div>

            <!-- 统计卡片 -->
            <div class="stats-overview">
                <div class="stat-card">
                    <div class="stat-icon"><i class="iconfont icon-people"></i></div>
                    <div class="stat-info">
                        <div class="stat-value" id="totalRankedUsers">0</div>
                        <div class="stat-label">参与用户</div>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon"><i class="iconfont icon-data"></i></div>
                    <div class="stat-info">
                        <div class="stat-value" id="totalQuizzes">0</div>
                        <div class="stat-label">总答题次数</div>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon"><i class="iconfont icon-pentagram"></i></div>
                    <div class="stat-info">
                        <div class="stat-value" id="avgScore">0</div>
                        <div class="stat-label">平均得分</div>
                    </div>
                </div>
            </div>

            <!-- 排行榜标签 -->
            <div class="leaderboard-tabs">
                <button class="tab-btn active" data-rank="score">总得分榜</button>
                <button class="tab-btn" data-rank="quiz">答题次数榜</button>
                <button class="tab-btn" data-rank="avg">平均分榜</button>
            </div>

            <!-- 排行榜列表 -->
            <div class="leaderboard-list" id="leaderboardList">
                <div class="loading">正在加载排行榜...</div>
            </div>
        </div>
    </main>

    <!-- JavaScript -->
    <script src="static/js/leaderboard.js"></script>
</body>
</html>

